<template>
  <div class="flex items-center max-w-sm p-6 mx-auto space-x-4 bg-white shadow-lg rounded-xl">
    <div class="shrink-0">
        <IconEcosystem  class="w-12 h-12 fill-blue-800 hover:fill-red-700"/>
    </div>
    <div>
        <div class="text-xl font-medium text-black">ChitChat</div>
        <p class="text-slate-500">You have a new message!</p>   
    </div>
</div>
</template>
<script setup lang="ts">
import IconEcosystem from "../components/icons/IconDocumentation.vue";
defineProps<{
  msg: string
}>();
</script>
<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
